<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      
       <el-input @keyup.enter.native="handleFilter" style="width: 110px;"  placeholder="店铺编号" v-model="listQuery.storeId"></el-input>
      <el-input @keyup.enter.native="handleFilter" style="width: 260px;"  placeholder="订单编号" v-model="listQuery.orderNo"></el-input>
            <el-date-picker v-model="timeRange"  type="daterange"   range-separator="至"  start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
      <el-button type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间"  fit highlight-current-row
      style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" label="店铺编号">
        <template slot-scope="scope">
          <span>{{scope.row.StoreId}}</span>
        </template>
      </el-table-column>
        <el-table-column align="center" label="订单编号" >
        <template slot-scope="scope">
          <span>{{scope.row.OrderNo}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="买家">
        <template slot-scope="scope">
          <img :src="scope.row.TradeUser.Avatar" class="logo-avatar" alt=""> 
        </template>
      </el-table-column>
      <el-table-column align="center" label="买家名称">
        <template slot-scope="scope">
           {{scope.row.TradeUser.NickName}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="分销商" >
        <template slot-scope="scope">
            <img :src="scope.row.Distributor.ShowLogo" class="logo-avatar" alt=""> 
         
        </template>
      </el-table-column>
      <el-table-column align="center" label="分销商名称" >
        <template slot-scope="scope">
            
          <span>{{scope.row.Distributor.DisStoreName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分销商类型" >
        <template slot-scope="scope">
           
          <span>[{{scope.row.Distributor.IsAgent==0?"分销商":"代理商"}}]</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="销售额">
        <template slot-scope="scope">
          <span>{{scope.row.OrderAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="佣金点">
        <template slot-scope="scope">
          <span>{{scope.row.BrokerageRise}}%</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="佣金">
        <template slot-scope="scope">
          <span>{{scope.row.BrokerageAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.Status | statusFilter">{{scope.row.Status | statusDisplayFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" v-bind:disabled="scope.row.Status==0"  size="mini" @click="handleUpdate(scope.row.Id)">撤销分拥</el-button>
          
          
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.itemsPerPage" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
import { fetchList, DeleteBrokerage } from "@/api/distributor";
import waves from "@/directive/waves"; // 水波纹指令
import { parseTime } from "@/utils";

export default {
  name: "brokeragelist",
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      list: [],
      total: null,
      listLoading: true,
      timeRange: [],
      listQuery: {
        page: 1,
        itemsPerPage: 30,
        storeId: 0,
        disStoreName: "",
        tradeTimeStart: "",
        tradeTimeEnd: "",
        orderNo: ""
      },
      showReviewer: false,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "Edit",
        create: "Create"
      },
      dialogPvVisible: false,
      pvData: [],
      downloadLoading: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        "0": "danger",
        "1": "info",
        "20": "info",
        "21": "success"
      };
      return statusMap[status];
    },
    statusDisplayFilter(status) {
      const statusMap = {
        "0": "待审核",
        "1": "已审核",
        "20": "待发放",
        "21": "已发放"
      };
      return statusMap[status];
    }
  },
  created() {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    this.timeRange = [start, end];
    this.getList();
  },
  methods: {
    getList() {
      //列表数据
      this.listLoading = true;

      fetchList(this.listQuery).then(response => {
        if (response.data.Code === 0) {
          this.list = response.data.Data.Items;
          this.total = response.data.Data.TotalItems;
        } else {
          this.$message({
            type: "danger",
            message: response.data.Message
          });
        }
        this.listLoading = false;
      });
    },

    

    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    //更新小程序模板
    handleUpdate(row) {
      this.$confirm("是否确认撤销分拥?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        DeleteBrokerage({ id: row })
          .then(response => {
            if (response.data.Code == 0) {
              this.$message({
                type: "success",
                message: "撤销成功!"
              });
              this.getList();
            } else {
              this.$message({
                type: "info",
                message: response.data.Message
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消撤销"
            });
          });
      });
    }
  }
};
</script>
<style scoped>
.logo-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>